<template>
    <div class="Notprocessed">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/ConsumablesStorage' }">教学设备管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/Lendandreturn' }"> 设备借出和归还</el-breadcrumb-item>
            <el-breadcrumb-item> 未处理借入申请</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="header">

        </div>
        <div class="content">
            <el-table :data="tableData" style="width: 100% ;" cell-class-name="table-center"
                @selection-change="SelectTableList">
                <el-table-column type="selection" width="45" header-align="center">
                </el-table-column>
                <el-table-column prop="name" label="申请人姓名"  header-align="center">
                </el-table-column>
                <el-table-column prop="rname" label="所在部门" header-align="center">
                </el-table-column>
                <el-table-column prop="cdistributeTime" label="申请时间"  header-align="center">
                </el-table-column>
                <el-table-column prop="address" label="借入设备"  header-align="center">
                    <el-button @click="dialogFormVisible = true">查看详情</el-button>
                </el-table-column>
                <el-table-column prop="loseTime" label="借入时间"  header-align="center">
                </el-table-column>
                <el-table-column prop="facilityTime" label="预计归还时间"  header-align="center">
                </el-table-column>
                <!-- <el-table-column prop="address" align="center" label="操作" header-align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleOK(scope.row.id)" circle>同意</el-button>
                        <el-button @click="handleDelete(scope.row.id)" type="danger" circle>拒绝</el-button></template>
                </el-table-column> -->
            </el-table>
            <div class="table-footer">
                <el-pagination background layout="prev, pager, next" :total="total" style="float: right;"
                    @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize">
                </el-pagination>
            </div>

        </div>
        <!-- 查看模态框 -->
        <el-dialog title="报废详情" :visible.sync="dialogFormVisible" width="70%">
            <div class="addLoseBox">
                <el-form :model="addForm" ref="addFormRef">
                    <el-form-item label="查询区域：" :label-width="formLabelWidth">
                        <el-input v-model="input" placeholder="请输入编码或名称" style="width: 150px"></el-input>
                        <el-button type="primary" class="chaXun" style="background-color: #3f3f65" @click="getdata()"
                            v-model="input">查询</el-button>
                    </el-form-item>
                    <el-form>
                        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange" cell-class-name="table-center" highlight-current-row>
                            <el-table-column type="index" width="55" header-align="center"
                                @click="getid()"></el-table-column>

                            <el-table-column label="分类" width="180" prop="className">
                            </el-table-column>
                            <el-table-column prop="facilityName" label="名称" width="180" header-align="center">
                            </el-table-column>
                            <el-table-column prop="facilityEncoding" label="编码" width="80" header-align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="借用人姓名" width="100" header-align="center">
                            </el-table-column>


                            <el-table-column prop="cspecification" label="规格" width="80" header-align="center">
                            </el-table-column>

                            <el-table-column prop="storageSite" label="存放地点" show-overflow-tooltip header-align="center">

                            </el-table-column>

                            <el-table-column prop="cdepositTime" label="入库时间" width="150" header-align="center">
                            </el-table-column>

                            <el-table-column prop="cnum" label="领用数量" width="80" header-align="center">
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import menu from "@/serive/index";
import axios from "../../utils/axios";
export default {
    data() {
        return {
            multipleSelection: [],
            selectData: "",
            currentPage: 1,
            pageSize: 10,
            total: 100,
            value1: '',
            value2: '',
            input: '',
            input1: '',
            tableData: [],//存放数据的空数组
            deleteData: [],//复选框数据
            dialogTableVisible: false,
            dialogFormVisibleEdit: false,
            dialogFormVisible: false,
            showform: [],
            form: {
                classId: '',
                cclassification: '',
                cname: '',
                cnum: '',
                cprice: '',
                creceiveNum: '',
                cspecification: '',
                cstorageSite: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                className: '',
            },

            //查看用户表单数据
            addForm: {
                classId: '',
                cname: '',
                id: '',
                cprice: '',
                cnum: '',
                cspecification: '',
                storageSite: '',
                capplyForTime: '',
                cstorageSiteId: '',
                className: '',
                cdepositTime: '',

            },
            formLabelWidth: '120px',
            value1: '',
            value2: ''
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        getdata() {
            this.$axios.post('/facility/lose/page', { "limit": this.pageSize, "page": this.currentPage, }
            ).then((r) => {
                console.log(r.data.data);
                this.tableData = r.data.data;
                this.total = r.data.count
            });
        }
        ,
        //显示当前页码
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log('当前页码：', currentPage);
            axios({
                url: '/consumable/distribute/page',
                method: 'post',
                data: { "page": currentPage, "limit": this.pageSize }
            }).then((r) => {
                console.log(r.data.data);
                this.tableData = r.data.data
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
        ,
        //删除
        handleDelete(id) {

            console.log(id);
            this.$axios.delete(`/consumable/writeOff/CancelWritOff/${id}`).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    alert("已拒绝")
                    // this.handleCurrentChange();
                    this.getdata();

                } else { 拒绝失败 }
            })
        },
        //同意
        handleOK(id) {
            console.log(id);
            this.$axios.delete(`/consumable/writeOff/CancelWritOff/${id}`).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    alert("同意")
                    // this.handleCurrentChange();
                    this.getdata();
                } else { 拒绝失败 }
            })
        },
        //批量删除
        SelectTableList(val) {
            this.deleteData = val;
            console.log(val);
        },
        async removeHouseByIds() {
            if (this.deleteData.length == 0) {
                this.$message.error("您还没有勾选申请人");
                return
            };
            let deletContent = [];
            for (let i = 0; i < this.deleteData.length; i++) {
                let j = this.deleteData[i];
                deletContent.push(j.id)
            }
            console.log(deletContent);
            const confirmResult = await this.$confirm('此操作将拒绝核销，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).catch(err => {
                return err
            });
            console.log(confirmResult);
            if (confirmResult !== 'confirm') {
                return this.$message.info('取消删除')

            }
            const { data: res } = await this.$axios.delete('/consumable/warehousing/deletes/' + deletContent);
            if (res.code !== 200) {
                return this.$message.error('删除失败！')
            }
            this.$message.success('删除成功！');
            this.getdata();
            // this.handleCurrentChange()
        }
    },
    mounted() {
        this.getdata()

    }


}
</script>
<style>
.Notprocessed {
    padding: 29px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px 30px;
    padding: 30px;
}

.addConsumables {
    padding-top: 10px;
}

.table-center {
    text-align: center !important;
}

.header {
    text-align: center;
}

.content {
    padding-top: 10px;
}

.el-table {
    border-radius: 10px;
}

.table-footer {
    padding-top: 10px;
}

h2 {
    padding: 10px;
}
</style>
